<template>
  <Layout>
    <template slot="header" class="head-main">
      <div class="head-title" style="height: 80px;">
        <span class="head-text" @click="goHome">XXXXXXX
          <span class="alarm " @click.stop="showDialog" :class="ifUnReview?'ifUnReview':''"></span>
          <el-dialog
                  :visible.sync="dialogVisible"
                  :append-to-body="true"
                  width="1200px"
                  :close-on-click-modal="false"
                  center
                  @open="() => {
                          $nextTick(() => {
                            $refs['warn'].open &&
                              $refs['warn'].open();
                          });
                          }">
            <warn
                    ref="warn"
                    :key="dialogVisible"
            ></warn>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false;">取 消</el-button>
            </span>
          </el-dialog>
        </span>

        <GroupMenu style="height:80px;" @onActive="changeActive"></GroupMenu>
      </div>

    </template>

    <template slot="aside">

    </template>

    <template slot="breadcrumb">
      <breadcrumb v-if="activeComponent!=='page'"></breadcrumb>
    </template>
    <template slot="body">
      <!--<keep-alive>-->
        <component :is="activeComponent" ref="module" :params="params" :key="activeComponent"/>
      <!--</keep-alive>-->
    </template>
  </Layout>
</template>
<script>
import Layout from '@/common/layout/default';
import GroupMenu from '@/common/menu/GroupMenu';
import Header from '@/common/header/Header';
import GroupHeader from '@/common/header/GroupHeader';
import Footer from '@/common/Footer';
import breadcrumb from '@/common/breadcrumb/index';
import ComsUtil from '@/util/components';

import CustomPage from '@/common/CustomPageMin';
var c = Object.assign(
  {
    Header,
    GroupHeader,
    Footer,
    breadcrumb,
    GroupMenu,
    Layout,
    CustomPage
  },
  ComsUtil.localRequire()
);
export default {
  components: c,
  data() {
    return {
      index: '',
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      ifUnReview: false,
      params: undefined,
      activeComponent: '',
    };
  },

  methods: {
    goHome() {
      this.$store.dispatch('setActiveMenuAsyn', ['page']);
    },
    changeActive(menu, params, from) {
      this.activeComponent = null;
      this.$nextTick(function() {
        this.activeComponent = menu.path;
        this.params = params;
      });
    },
    showDialog() {
      this.dialogVisible = true;
    },
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.loadData()
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadData()
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {});
  },
};
</script>

<style scoped lang="less">

.head-title {
  height: 80px;
  background-color: rgba(21,164,250,0.4);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 6px 0px #ffffff;
  .head-text{
    /*font-family: '华文行楷 Bold', '华文行楷 Regular', '华文行楷', sans-serif;*/
    color: #fff;
    font-style: normal;
    font-size: 30px;
    cursor: pointer;
      &:before{
          content: '';
          background-image: url("~@/assets/logo1.png");
          background-size: 100%;
          background-repeat: no-repeat;
          width: 45px;
          height: 45px;
          margin: 0 20px;
          display: inline-block;
          vertical-align: text-bottom;
      }
  }
  .alarm{
    margin-left: 35px;
    width: 15px;
    height: 15px;
    display: inline-block;
    background-image: url("~@/assets/sysalarm.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    &:after{
      position: absolute;
      height: 100%;
      width: 15px;
      left: 0;
      content: '';
      background: inherit;
      filter: drop-shadow(15px 0 0 #dd200a);
      transform: translateX(-30px);
    }
    &:hover{
      &:after{
        transform: translateX(-15px);
      }
    }
  }
  .ifUnReview{
    cursor: pointer;
    &:after{
      transform: translateX(-15px);
      animation: alarm_twinkle 1s linear infinite;
      -webkit-animation: alarm_twinkle 1s linear infinite;
      -moz-animation: alarm_twinkle 1s linear infinite;
      -o-animation: alarm_twinkle 1s linear infinite;
    }
  }

  .have{
    transform: translateX(-15px);
  }
}
</style>
